<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="初访认领统计" name="first">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="统计年月" prop="ffsq">
            <el-date-picker v-model="ffsq" @change="handlePrintList" type="monthrange" align="right" value-format="yyyy-MM" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions"> </el-date-picker>
          </el-form-item>

          <el-form-item label="属地" prop="ownerArea">
            <el-select v-model="ownerArea" placeholder="请选择属地" @change="handlePrintList" clearable>
              <el-option v-for="dict in dict.type.biz_area_owner" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- 
          <el-form-item>
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport(ffsq[0], ffsq[1], '1')" v-hasPermi="['city:letter:claim:export']">导出</el-button>
          </el-form-item> -->
        </el-form>
        <div class="PrintTable" id="jsds">
          <h1>{{ beginMonth }}月-{{ endMonth }}月初访事项分类表</h1>
          <table id="myTable" style="width: auto; overflow-x: auto">
            <tr id="firstrowid" style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <th v-for="header in firstRowData" :key="header.keys" :style="header.styles" :rowspan="header.rowspan" :colspan="header.colspan">
                {{ header.texts }}
              </th>
            </tr>
            <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <td v-for="header in secRowData" :key="header.keys" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
            <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <td v-for="header in thrRowData" :key="header.keys" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
            <tr v-for="(info, index) in tableList" :key="index" style="text-align: center; height: 20px !important; font-size: 12px !important">
              <td v-for="(header, idx) in info.tableColList" :key="idx" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="三访认领统计" name="second">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="统计年月" prop="ffsq">
            <el-date-picker v-model="ffsq2" @change="handlePrintList2" type="monthrange" align="right" value-format="yyyy-MM" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions"> </el-date-picker>
          </el-form-item>

          <el-form-item label="属地" prop="ownerArea">
            <el-select v-model="ownerArea2" placeholder="请选择属地" @change="handlePrintList2" clearable>
              <el-option v-for="dict in dict.type.biz_area_owner" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>

          <!-- <el-form-item>
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport(ffsq2[0], ffsq2[1], '0')" v-hasPermi="['city:letter:claim:export']">导出</el-button>
          </el-form-item> -->
        </el-form>
        <div class="PrintTable" id="jsds">
          <h1>{{ beginMonth }}月-{{ endMonth }}月三访事项分类表</h1>
          <table id="myTable" style="width: auto; overflow-x: auto">
            <tr id="firstrowid" style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <th v-for="header in firstRowData" :key="header.keys" :style="header.styles" :rowspan="header.rowspan" :colspan="header.colspan">
                {{ header.texts }}
              </th>
            </tr>
            <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <td v-for="header in secRowData" :key="header.keys" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
            <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <td v-for="header in thrRowData" :key="header.keys" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
            <tr v-for="(info, index) in tableList2" :key="index" style="text-align: center; height: 20px !important; font-size: 12px !important">
              <td v-for="(header, idx) in info.tableColList" :key="idx" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="认领统计汇总" name="third">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="统计年月" prop="ffsq">
            <el-date-picker v-model="ffsq3" @change="handlePrintList3" type="monthrange" align="right" value-format="yyyy-MM" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions"> </el-date-picker>
          </el-form-item>

          <el-form-item label="属地" prop="ownerArea">
            <el-select v-model="ownerArea3" placeholder="请选择属地" @change="handlePrintList3" clearable>
              <el-option v-for="dict in dict.type.biz_area_owner" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport(ffsq3[0], ffsq3[1], '')" v-hasPermi="['city:letter:claim:export']">导出</el-button>
          </el-form-item> -->
        </el-form>
        <div class="PrintTable" id="jsds">
          <h1>{{ beginMonth }}月-{{ endMonth }}月汇总事项分类表</h1>
          <table id="myTable" style="width: auto; overflow-x: auto">
            <tr id="firstrowid" style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <th v-for="header in firstRowData" :key="header.keys" :style="header.styles" :rowspan="header.rowspan" :colspan="header.colspan">
                {{ header.texts }}
              </th>
            </tr>
            <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <td v-for="header in secRowData" :key="header.keys" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
            <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
              <td v-for="header in thrRowData" :key="header.keys" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
            <tr v-for="(info, index) in tableList3" :key="index" style="text-align: center; height: 20px !important; font-size: 12px !important">
              <td v-for="(header, idx) in info.tableColList" :key="idx" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
                {{ header.texts }}
              </td>
            </tr>
          </table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { treeselect } from "@/api/hades/category/category";
import { totallist } from "@/api/hades/homepage/homepage";
export default {
  components: {},
  dicts: ["biz_area_owner"],
  data() {
    return {
      loading: false,
      // 查询参数
      queryParams: {},
      activeName: "first",
      ffsq: null,
      ffsq2: null,
      ffsq3: null,
      ownerArea: null,
      ownerArea2: null,
      ownerArea3: null,
      beginMonth: "",
      endMonth: "",
      year: "",
      month: "",
      //第一行列名
      firstRowData: [],
      secRowData: [],
      thrRowData: [],
      //分类数据
      categoryOptions: [],
      //统计数据
      tableList: [],
      // 三访*********
      tableList2: [],
      tableList3: [],
      // 有理访无理访表头 背影色
      youlistyle: "width:100px;background-color: #fbe2bc;",
      wulistyle: "width:100px;background-color: #e9eeee;",
      // 内容数据大于0 样式
      yldataGtStyle: "color:#FF0000;font-weight:bold;font-size:16px;background-color: #fbe2bc;",
      wldataGtStyle: "color:#FF0000;font-weight:bold;font-size:16px;background-color: #e9eeee;",
      yldataLtStyle: "background-color: #fbe2bc;",
      wldataLtStyle: "background-color: #e9eeee;",
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.init();
    this.getCategoryList();
    this.handlePrintList();
    this.handlePrintList2();
    this.handlePrintList3();
  },
  methods: {
    init() {
      const now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let m = month < 10 ? "0" + month : month;
      let endMonth = `${year}-${m}`;
      let beginMonth = `${year}-01`;

      this.beginMonth = beginMonth;
      this.endMonth = endMonth;
      this.ffsq = [beginMonth, endMonth];
      this.ffsq2 = [beginMonth, endMonth];
      this.ffsq3 = [beginMonth, endMonth];
    },
    handlePrintList3() {
      let params = {
        beginDate: this.ffsq3[0],
        endDate: this.ffsq3[1],
        deptId: this.ownerArea3,
      };
      this.tableList3 = [];
      totallist(params).then((res) => {
        let tmpdata = []; //行数据
        let idx = 0;
        res.data.forEach((m, mIndex) => {
          let col = [];
          if (m.mergeRows > 0) {
            col.push({ keys: "am" + m.cityCode + "-" + m.deptId, texts: ++idx, rowspan: m.mergeRows, colspan: "1" });
            col.push({ keys: "bm" + m.cityCode + "-" + m.deptId, texts: m.cityName, rowspan: m.mergeRows, colspan: "1", styles: "width:500px;" });
          }
          col.push({ keys: "cm" + m.cityCode + "-" + m.deptId, texts: m.deptName, rowspan: "1", colspan: "1", styles: "width:500px;" });
          // if (m.mergeRows > 0) {
          //   col.push({ keys: "dm" + m.cityCode + "-" + m.deptId, texts: m.jiaobanNum, rowspan: m.mergeRows, colspan: "1" });
          //   col.push({ keys: "em" + m.cityCode + "-" + m.deptId, texts: m.tuihuiNum, rowspan: m.mergeRows, colspan: "1" });
          // }

          col.push({ keys: "dm" + m.cityCode + "-" + m.deptId, texts: m.jiaobanNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "em" + m.cityCode + "-" + m.deptId, texts: m.tuihuiNum, rowspan: "1", colspan: "1" });

          col.push({ keys: "fm" + m.cityCode + "-" + m.deptId, texts: m.querenNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "gm" + m.cityCode + "-" + m.deptId, texts: m.youliNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "hm" + m.cityCode + "-" + m.deptId, texts: m.wuliNum, rowspan: "1", colspan: "1" });
          let len = m.categoryList.length / 2;
          m.categoryList.forEach((sub, idx) => {
            if (idx < len) {
              let styles = this.yldataGtStyle;
              if (sub == 0) {
                styles = this.yldataLtStyle;
              }
              col.push({ keys: "subtype" + idx, texts: sub, rowspan: "1", colspan: "1", styles: styles });
            } else {
              let styles = this.wldataGtStyle;
              if (sub == 0) {
                styles = this.wldataLtStyle;
              }
              col.push({ keys: "subtype" + idx, texts: sub, rowspan: "1", colspan: "1", styles: styles });
            }
          });

          let rows = {
            tableColList: col,
          };
          this.tableList3.push(rows);
        });
      });
    },
    /*
     * 查询三访数据
     */
    handlePrintList2() {
      let params = {
        beginDate: this.ffsq2[0],
        endDate: this.ffsq2[1],
        isVisit: "0",
        deptId: this.ownerArea2,
      };
      this.tableList2 = [];
      totallist(params).then((res) => {
        let tmpdata = []; //行数据
        let idx = 0;
        res.data.forEach((m, mIndex) => {
          let col = [];
          if (m.mergeRows > 0) {
            col.push({ keys: "am" + m.cityCode + "-" + m.deptId, texts: ++idx, rowspan: m.mergeRows, colspan: "1" });
            col.push({ keys: "bm" + m.cityCode + "-" + m.deptId, texts: m.cityName, rowspan: m.mergeRows, colspan: "1", styles: "width:500px;" });
          }
          col.push({ keys: "cm" + m.cityCode + "-" + m.deptId, texts: m.deptName, rowspan: "1", colspan: "1", styles: "width:500px;" });
          // if (m.mergeRows > 0) {
          //   col.push({ keys: "dm" + m.cityCode + "-" + m.deptId, texts: m.jiaobanNum, rowspan: m.mergeRows, colspan: "1" });
          //   col.push({ keys: "em" + m.cityCode + "-" + m.deptId, texts: m.tuihuiNum, rowspan: m.mergeRows, colspan: "1" });
          // }
          col.push({ keys: "dm" + m.cityCode + "-" + m.deptId, texts: m.jiaobanNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "em" + m.cityCode + "-" + m.deptId, texts: m.tuihuiNum, rowspan: "1", colspan: "1" });

          col.push({ keys: "fm" + m.cityCode + "-" + m.deptId, texts: m.querenNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "gm" + m.cityCode + "-" + m.deptId, texts: m.youliNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "hm" + m.cityCode + "-" + m.deptId, texts: m.wuliNum, rowspan: "1", colspan: "1" });
          let len = m.categoryList.length / 2;
          m.categoryList.forEach((sub, idx) => {
            if (idx < len) {
              let styles = this.yldataGtStyle;
              if (sub == 0) {
                styles = this.yldataLtStyle;
              }
              col.push({ keys: "subtype" + idx, texts: sub, rowspan: "1", colspan: "1", styles: styles });
            } else {
              let styles = this.wldataGtStyle;
              if (sub == 0) {
                styles = this.wldataLtStyle;
              }
              col.push({ keys: "subtype" + idx, texts: sub, rowspan: "1", colspan: "1", styles: styles });
            }
          });

          let rows = {
            tableColList: col,
          };
          this.tableList2.push(rows);
        });
      });
    },
    /*
     * 查询初访数据
     */
    handlePrintList() {
      this.beginMonth = this.ffsq[0];
      this.endMonth = this.ffsq[1];
      let params = {
        beginDate: this.ffsq[0],
        endDate: this.ffsq[1],
        isVisit: "1",
        deptId: this.ownerArea,
      };
      this.tableList = [];
      totallist(params).then((res) => {
        let tmpdata = []; //行数据
        let idx = 0;
        res.data.forEach((m, mIndex) => {
          let col = [];
          if (m.mergeRows > 0) {
            col.push({ keys: "am" + m.cityCode + "-" + m.deptId, texts: ++idx, rowspan: m.mergeRows, colspan: "1" });
            col.push({ keys: "bm" + m.cityCode + "-" + m.deptId, texts: m.cityName, rowspan: m.mergeRows, colspan: "1", styles: "width:500px;" });
          }
          col.push({ keys: "cm" + m.cityCode + "-" + m.deptId, texts: m.deptName, rowspan: "1", colspan: "1", styles: "width:500px;" });
          // if (m.mergeRows > 0) {
          //   col.push({ keys: "dm" + m.cityCode + "-" + m.deptId, texts: m.jiaobanNum, rowspan: m.mergeRows, colspan: "1" });
          //   col.push({ keys: "em" + m.cityCode + "-" + m.deptId, texts: m.tuihuiNum, rowspan: m.mergeRows, colspan: "1" });
          // }

          col.push({ keys: "dm" + m.cityCode + "-" + m.deptId, texts: m.jiaobanNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "em" + m.cityCode + "-" + m.deptId, texts: m.tuihuiNum, rowspan: "1", colspan: "1" });

          col.push({ keys: "fm" + m.cityCode + "-" + m.deptId, texts: m.querenNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "gm" + m.cityCode + "-" + m.deptId, texts: m.youliNum, rowspan: "1", colspan: "1" });
          col.push({ keys: "hm" + m.cityCode + "-" + m.deptId, texts: m.wuliNum, rowspan: "1", colspan: "1" });
          let len = m.categoryList.length / 2;
          m.categoryList.forEach((sub, idx) => {
            if (idx < len) {
              let styles = this.yldataGtStyle;
              if (sub == 0) {
                styles = this.yldataLtStyle;
              }
              col.push({ keys: "subtype" + idx, texts: sub, rowspan: "1", colspan: "1", styles: styles });
            } else {
              let styles = this.wldataGtStyle;
              if (sub == 0) {
                styles = this.wldataLtStyle;
              }
              col.push({ keys: "subtype" + idx, texts: sub, rowspan: "1", colspan: "1", styles: styles });
            }
          });

          let rows = {
            tableColList: col,
          };
          this.tableList.push(rows);
        });
      });
    },
    /*
     * 初始化列标题数据
     */
    initTableItemData() {
      this.secRowData.push({ keys: "yltotal", types: "yl", texts: "有理分类共计", rowspan: "2", colspan: "1", styles: this.youlistyle });
      //有理访分类 列数
      let yl_colspan_num = 1;
      //初始化第二行列名
      this.categoryOptions.forEach((m, mIndex) => {
        let flag = false;
        if (m.children) {
          flag = true;
        }
        if (flag) {
          let arr = {
            keys: "yl-" + m.value,
            texts: m.label,
            rowspan: "1",
            colspan: m.children.length,
            styles: this.youlistyle,
          };
          this.secRowData.push(arr);
          yl_colspan_num = yl_colspan_num + m.children.length;
          //初始化第三行数据
          m.children.forEach((sub) => {
            let signkeys = m.value + "-" + sub.value;
            this.thrRowData.push({ keys: "yl-" + sub.value, types: "yl", texts: sub.label, signkeys: signkeys, styles: this.youlistyle });
          });
        } else {
          let arr = {
            keys: "yl-" + m.value,
            texts: m.label,
            rowspan: "2",
            colspan: "1",
            styles: this.youlistyle,
          };
          this.secRowData.push(arr);
          yl_colspan_num = yl_colspan_num + 1;
        }
      });
      this.secRowData.push({ keys: "wltotal", types: "wl", texts: "无理分类共计", rowspan: "2", colspan: "1", styles: this.wulistyle });
      this.categoryOptions.forEach((m, mIndex) => {
        let flag = false;
        if (m.children) {
          flag = true;
        }
        if (flag) {
          let arr = {
            keys: "wl-" + m.value,
            texts: m.label,
            rowspan: "1",
            colspan: m.children.length,
            styles: this.wulistyle,
          };
          this.secRowData.push(arr);
          //初始化第三行数据
          m.children.forEach((sub) => {
            let signkeys = m.value + "-" + sub.value;
            this.thrRowData.push({ keys: "wl-" + sub.value, types: "yl", texts: sub.label, signkeys: signkeys, styles: this.wulistyle });
          });
        } else {
          let arr = {
            keys: "wl-" + m.value,
            texts: m.label,
            rowspan: "2",
            colspan: "1",
            styles: this.wulistyle,
          };
          this.secRowData.push(arr);
        }
      });
      //初始化第一行列名   billMonth
      this.firstRowData.push({ keys: "xh", texts: "序号", rowspan: "3", colspan: "1", styles: "width:50px" });
      this.firstRowData.push({ keys: "city", texts: "地市", rowspan: "3", colspan: "1", styles: "width:150px" });
      this.firstRowData.push({ keys: "companyName", texts: "单位名称", rowspan: "3", colspan: "1", styles: "width:150px" });
      this.firstRowData.push({ keys: "jb", texts: "交办", rowspan: "3", colspan: "1", styles: "width:100px" });
      this.firstRowData.push({ keys: "th", texts: "退回数量", rowspan: "3", colspan: "1", styles: "width:100px" });
      this.firstRowData.push({ keys: "qr", texts: "确认数量", rowspan: "3", colspan: "1", styles: "width:100px" });
      this.firstRowData.push({ keys: "yl", texts: "有理访数", rowspan: "3", colspan: "1", styles: "width:100px" });
      this.firstRowData.push({ keys: "wl", texts: "无理访数", rowspan: "3", colspan: "1", styles: "width:100px" });
      this.firstRowData.push({ keys: "ylf", texts: "有理访分类", rowspan: "1", colspan: yl_colspan_num, styles: this.youlistyle });
      this.firstRowData.push({ keys: "wlf", texts: "无理访分类", rowspan: "1", colspan: yl_colspan_num, styles: this.wulistyle });
    },
    /** 查询分类列表 */
    getCategoryList() {
      treeselect().then((response) => {
        this.categoryOptions = response.data;
        this.initTableItemData();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.ffsq = null;
      this.ffsq2 = null;
      this.year = "";
      this.month = "";
    },

    /** 导出按钮操作 */
    handleExport(beginDate, endDate, isVisit) {
      console.log(beginDate, endDate);
      let params = {
        beginDate: beginDate,
        endDate: endDate,
        isVisit: isVisit,
        deptId: this.ownerArea,
        exportType: "CLAIM_REPORT",
      };
      this.download(
        "letter/export/exportData",
        {
          ...params,
        },
        `letter_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style scoped>
table,
th,
td {
  border: 1px solid #999999;
}
.PrintTable {
  overflow: auto;
  width: 100%;
}
</style>
